<template>
  <!-- 导航栏 -->
  <navbarback2></navbarback2>
  <view class="viewpoint">
    <scroll-view scroll-y>
      <!-- 专项档案 -->
      <view style="background-color: #fff">
        <view class="titlepatent">专项档案</view>
        <!-- 人群分类： -->
        <view>
          <view class="contain">
            <view style="width: 100rpx; text-align: center; font-size: 14rpx; color: black"
              >人群分类：</view
            >
            <view class="disease">
              <view class="disease_content">
                <view v-for="item in diseaseform" :key="item.id">
                  <view v-if="arr.includes(item.crowdName)" class="disease_item active">{{
                    item.crowdName
                  }}</view>
                  <view v-else class="disease_item">{{ item.crowdName }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 档案建立 -->
        <view>
          <view class="contain">
            <view style="width: 100rpx; text-align: center; font-size: 14rpx; color: black"
              >档案建立：</view
            >
            <view class="disease">
              <view class="disease_content">
                <view v-for="item in arr" :key="item">
                  <view class="disease_item_1 active">{{ item }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 封面档案 -->
      <view style="background-color: #fff; margin-top: 10rpx">
        <view class="titlepatent">档案封面</view>
        <!-- 人群分类： -->
        <view>
          <view class="contain_1">
            <view class="info-item">
              <view style="font-size: 15rpx; width: 100rpx; text-align: center">姓名：</view>
              <view class="input"><input disabled placeholder="" v-model="infoform.name" /></view>
            </view>
            <view class="info-item">
              <view style="font-size: 15rpx; width: 100rpx; text-align: center">性别：</view>
              <view class="input"><input disabled placeholder="" v-model="infoform.sex" /></view>
            </view>
            <view class="info-item">
              <view style="font-size: 15rpx; width: 100rpx; text-align: center">年龄：</view>
              <view class="input"><input disabled placeholder="" v-model="infoform.age" /></view>
            </view>
            <view class="info-item">
              <view style="font-size: 15rpx; width: 100rpx; text-align: center">身份证：</view>
              <view class="input"
                ><input disabled placeholder="" v-model="infoform.idNumber"
              /></view>
            </view>
            <view class="info-item">
              <view style="font-size: 15rpx; width: 100rpx; text-align: center">电话：</view>
              <view class="input"
                ><input disabled placeholder="" v-model="infoform.phoneNumber"
              /></view>
            </view>
            <view class="info-item">
              <view style="font-size: 15rpx; width: 100rpx; text-align: center">建档时间：</view>
              <view class="input"
                ><input disabled placeholder="" v-model="infoform.createTime"
              /></view>
            </view>
            <view class="info-item" style="width: 100% !important">
              <view style="font-size: 15rpx; width: 100rpx; text-align: center">地址：</view>
              <view class="input"
                ><input disabled placeholder="" v-model="infoform.address"
              /></view>
            </view>
          </view>
        </view>
      </view>
      <view class="next">
        <view class="modify" @tap="modify">修改档案</view>
        <view class="back" @tap="back">返回</view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
import navbarback2 from '@/component/navbarback2.vue'
import { getAllCrowd } from '@/services/sign'
import { onLoad, onReady, onShow } from '@dcloudio/uni-app'
const query = defineProps<{ params: any }>()
const infoform = ref()
infoform.value = JSON.parse(query.params)
let arr = ref([])
arr = JSON.parse(query.params).disease.split(',')
//获取疾病类型
const diseaseform = ref<any[]>([])
const getdisease = async () => {
  const res = await getAllCrowd()
  diseaseform.value = res.data
  diseaseform.value.forEach((item: any) => {
    item.push({ select: false })
    console.log(item)
  })
}
const modify = () => {
  uni.navigateTo({
    url: `/pages/modifyarchive/modifyarchive?params=${JSON.stringify(infoform.value)}`,
  })
}
const back = () => {
  uni.navigateBack()
}
onLoad(() => {
  getdisease()
})

</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #f4f4f4;
}
.viewpoint {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 50rpx);
  padding: 10rpx 15rpx;
  width: 100%;

  .titlepatent {
    width: 100%;
    font-size: 20rpx;
    color: #00a8ff;
    font-weight: bold;
    height: 30rpx;
  }
  .contain {
    flex: 1;
    width: 100%;
    padding: 0rpx 30rpx;
    display: flex;
    .disease {
      flex: 1;
      .disease_content {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        // margin-top: 10rpx;
        .disease_item {
          padding: 5rpx 10rpx;
          font-size: 14rpx;
          color: #8d8b8b;
          font-weight: bold;
          border: 1rpx solid #ccc;
          border-radius: 3rpx;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
        }
        .disease_item_1 {
          padding: 5rpx 10rpx;
          font-size: 14rpx;
          color: #8d8b8b;
          font-weight: bold;
          border: 1rpx solid #ccc;
          border-radius: 50rpx;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
        }
        .active {
          background-color: #1ab1ff;
          color: #fff;
        }
      }
    }
  }
  .contain_1 {
    flex: 1;
    width: 100%;
    padding: 20rpx 30rpx;
    display: flex;
    flex-wrap: wrap;

    .info-item {
      display: flex;
      margin-top: 10rpx;
      height: 30rpx;
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      .input {
        border: 2rpx solid #ccc;
        height: 100%;
        width: 70%;
        border-radius: 5rpx;
        input {
          margin-left: 5rpx;
          height: 100%;
          color: #a1a1a1;
          font-size: 16rpx;
        }
      }
    }
  }
  .next {
    width: 100%;
    height: 50rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 30rpx;
    .modify,
    .back {
      height: 40rpx;
      text-align: center;
      line-height: 40rpx;
      width: 100rpx;
      font-size: 16rpx;
      color: #fff;
      font-weight: bold;
      background-color: #00a8ff;
      border-radius: 5rpx;
    }
  }
}
</style>